{% extends "blog/base.html" %}
{% load static %}
{% load blog_tags %}

 {% block title %}
        <title>ChatGPT-Share Friend-Link</title>
 {% endblock %}


{% block header %}
    <header class="masthead" style="background-image: url('https://qiniu.li-xun.work/media/img-3.jpg')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="site-heading">
                        <h1>Friend Link</h1>
                        <span class="subheading">LiXun Blog</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endblock %}

{% block main %}
    <div class="container px-4 px-lg-5">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            {% for friend in friend_lst %}
                <div class="col">
                    <a href="{{ friend.link }}" style="text-decoration: none; color: inherit;" target="_blank">
                        <div class="card h-100" style="width: 15rem;">
                            <div class="card-body">
                                <h5 class="card-title d-flex align-items-center"><img
                                        src="{{ friend.logo }}" class="card-img-top" alt="..."
                                        style="width: 32px;height: 32px;margin-right: 5px;">{{ friend.name }}</h5>
                                <p class="card-text">{{ friend.description|my_slice:":23" }}</p>
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}